<template>
    <el-dialog v-model="dialogModel" title="综合素质发起" width="50%" top="3vh">
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h6 :id="titleId" :class="titleClass">综合素质评价确认</h6>
            </div>
        </template>
        <el-descriptions title="是否及格" border style="margin-top: 15px;" :column="1">
            <el-descriptions-item>
                <el-radio-group v-model="formInfo.isPass">
                    <el-radio :label="true">及格</el-radio>
                    <el-radio :label="false">不及格</el-radio>
                </el-radio-group>
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="备注" border style="margin-top: 15px;">
            <el-descriptions-item>
                <el-input v-model="formInfo.note" style="width: 100%" :rows="4" type="textarea" placeholder="" />
            </el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="" border style="margin-top: 15px;">
        </el-descriptions>
        <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
            <el-button type="primary" @click="handlerSubmit">确定</el-button>
            <el-button type="primary" @click="handlerCancal" style="margin-left: 50px;">取消</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { ElNotification, ElDescriptions, ElDescriptionsItem, ElRadioGroup, ElRadio } from 'element-plus';
import { confirmAssessResult } from '@/api/position/positionAssessResultSubjective';

const props = defineProps({
    detail: {},
    type: '',
});
const dialogModel = ref(false);
const formInfo = ref({
    isPass: true,
    note: "",
})
defineExpose({
    open() {
        dialogModel.value = true;
    }
});

async function handlerSubmit() {
    let res = await confirmAssessResult(props.detail.id, formInfo.value.isPass, formInfo.value.note)
    if (res.data.success) {
        ElNotification({
            title: '提示',
            type: 'warning',
            message: h('i', { style: 'color: teal' }, '提交成功'),
        })
        dialogModel.value = false;
    } else {
        ElNotification({
            title: '提示',
            type: 'warning',
            message: h('i', { style: 'color: teal' }, '提交失败'),
        })
    }
}

function handlerCancal(params) {
    console.log(params.default);
    dialogModel.value = false;
}
</script>
<style scoped>
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 38px;
}

.info-box {
    font-size: 14px;
    margin-bottom: 4px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mt-4 {
    margin-top: 16px;
}
</style>